<script setup lang="ts">
import EventPrev from '~/components/Activity/EventPrev/index.vue'
import SuperRedEnv from '~/components/Activity/SuperRedEnv/index.vue'
import Activity from './components/Activity/index.vue'
import Banner from './components/Banner/index.vue'
import LeftActive from './components/FixActive/Left.vue'
import RightActive from './components/FixActive/Right.vue'
import Footer from './components/Footer/index.vue'
import GameList from './components/GameList/index.vue'
import GameType from './components/GameType/index.vue'
import Search from './components/GameType/Search.vue'
import ActivityDialog from './components/Head/ActivityDialog.vue'
import Head from './components/Head/index.vue'
import LeftMenu from './components/LeftMenu/index.vue'

const lang: any = getCurrentPageLang('home')

// 搜索
const showSearch = ref(false)
function changeShowSearch(isShow: boolean) {
  showSearch.value = isShow
}

// 活动弹窗
const showActivityDialog = ref(false)
function changeShowActivityDialog(isShow: boolean) {
  showActivityDialog.value = isShow
}

// 超级红包雨
const showSuperRedEnv = ref(false)
function changeShowSuperRedEnv(isShow: boolean) {
  showSuperRedEnv.value = isShow
}

// 活动预览
const showEventPrev = ref(false)
function changeShowEventPrev(isShow: boolean) {
  showEventPrev.value = isShow
}

// 左侧菜单
const showLeftMenu = ref(false)
function changeShowLeftMenu(isShow: boolean) {
  showLeftMenu.value = isShow
}

// 游戏类型
const gameTypeList = ref<any[]>([])
gameTypeList.value = Array.from({ length: 12 }).fill({}).map((item, index) => {
  const id = index + 1
  return {
    id,
    img: `/images/home/gameType/${id}.png`,
    title: lang[`game_type_${id}`],
    resInfo: null,
  }
})

// 处理游戏类型列表
const activeGameType = ref(gameTypeList.value[0])
const appCenterRef = ref()
const gameListRef = ref()
async function changeGameType(item: any) {
  let newActive
  // 如果是top，处理方式和quente一样
  if (item.title === lang.game_type_top) {
    newActive = gameTypeList.value[0]
  } else {
    newActive = item
  }
  activeGameType.value = newActive
  await nextTick()
  gameListRef.value.initLoadingGames?.()
  // appCenterRef.value.scrollTo({ top: getPxFromRem(7.7) });
}
</script>

<template>
  <div class="page-box">
    <!-- APK下载、登录、6块小活动 -->
    <Head
      :show-left-menu="showLeftMenu"
      @change-show-left-menu="changeShowLeftMenu"
      @change-show-activity-dialog="changeShowActivityDialog"
    />
    <div ref="appCenterRef" class="app_center">
      <!-- 轮播图 -->
      <Banner />
      <!-- 3块大活动 -->
      <Activity />
      <!-- 滚动公告、搜索、游戏类型 -->
      <GameType
        :game-type-list="gameTypeList"
        :active-game-type="activeGameType"
        @change-game-type="changeGameType"
        @change-show-search="changeShowSearch"
      />
      <!-- 游戏列表 -->
      <GameList
        ref="gameListRef"
        :game-type-list="gameTypeList"
        :active-game-type="activeGameType"
        @change-game-type="changeGameType"
      />
      <!-- 底部 -->
      <Footer />
    </div>
    <!-- 屏幕左侧固定活动 -->
    <LeftActive :app-center-ref="appCenterRef" />
    <!-- 屏幕右侧固定活动 -->
    <RightActive
      :app-center-ref="appCenterRef"
      @change-show-super-red-env="changeShowSuperRedEnv"
      @change-show-event-prev="changeShowEventPrev"
    />
  </div>
  <!-- 左侧菜单 -->
  <LeftMenu
    :show-left-menu="showLeftMenu"
    @change-show-left-menu="changeShowLeftMenu"
  />
  <!-- 搜索 -->
  <Search :show-search="showSearch" @change-show-search="changeShowSearch" />
  <!-- 活动弹窗 -->
  <ActivityDialog
    :show="showActivityDialog"
    @change-show-activity-dialog="changeShowActivityDialog"
  />
  <!-- 超级红包雨 -->
  <SuperRedEnv
    :show="showSuperRedEnv"
    @change-show-super-red-env="changeShowSuperRedEnv"
  />
  <!-- 活动预览 -->
  <EventPrev :show="showEventPrev" @change-show-event-prev="changeShowEventPrev" />
</template>

<style lang="scss" scoped>
.page-box {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
